<template>
	<view class="bottom_navi" :style="deviceWidth ? { width: deviceWidth + 'px' } :  { width: 100 + '%' }">
		<view class="bottom_navi_xuan" @click="handTab('home')"
			:style="curName=='home'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">
			<view class="top"
				:style="curName=='home'?'background-color:  rgb(26, 61, 150);':'background-color: rgb(255, 255, 255);'">
			</view>
			<view class="icon">
				<view>
					<svg width="60px" height="60px" viewBox="0 0 140 140" version="1.1"
						xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
						<title>赛马频道icon</title>
						<desc>Created with Sketch.</desc>
						<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<g id="14″-iPad-Pro" transform="translate(-47.000000, -2244.000000)">
								<g id="赛马频道" transform="translate(82.000000, 2286.000000)"
									:fill="curName=='home'?'#00309B':'#191919'">
									<path
										d="M25.5438246,9.57902571e-14 C29.3280436,9.57902571e-14 32.1662079,0.94605475 34.0583174,2.83816425 C36.8964816,5.6763285 34.0583174,5.6763285 36.8964816,11.352657 C45.4109744,11.352657 48.8973051,19.8475617 51.0873029,28.3816425 C54.7101672,42.4993811 48.2491386,65.2777778 53.9254671,73.7922705 C53.9254671,73.7922705 17.1307822,74.6686177 17.0293319,73.7922705 C19.9689465,60.4777964 25.5438246,51.0869565 29.3613999,42.5354514 C31.2201531,39.7342995 26.3690146,36.8966077 22.7056604,36.8961353 C16.2881447,36.8953077 7.48345977,41.5410844 5.67667487,39.7342995 C3.28070542,38.7018768 0.0145645857,33.9230409 0,31.2198068 C0,25.5434783 12.3662261,17.8480932 19.8674961,11.352657 C23.498354,8.20865535 28.3819889,11.352657 25.5438246,9.57902571e-14 Z M47.1214792,9.87089689 L48.2491386,11.352657 C68.1162884,19.8671498 70.9544526,51.0869565 70.9544526,73.7922705 L70.9544526,73.7922705 L59.6017956,73.7922705 C53.9254671,70.9541063 56.7636314,53.9251208 56.7636314,36.8961353 C56.7636314,26.9697148 51.3421201,16.1309313 47.1214792,9.87089689 L47.1214792,9.87089689 Z"
										id="形状结合"></path>
								</g>
								<text id="赛马频道" font-family="PingFangTC-Medium, PingFang TC" font-size="36"
									font-weight="400" letter-spacing="-1.68" fill="#00309B">
									<tview x="49" y="2421">赛马频道</tview>
								</text>
							</g>
						</g>
					</svg>
				</view>
			</view>
			<view class="title" :style="curName=='home'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">首页</view>
		</view>
		<view class="bottom_navi_xuan" @click="handTab('DrawPrize')"
			:style="curName=='DrawPrize'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">
			<view class="top"
				:style="curName=='DrawPrize'?'background-color:  rgb(26, 61, 150);':'background-color: rgb(255, 255, 255);'">
			</view>
			<view class="icon">
				<view>
					<svg width="60px" height="60px" viewBox="0 0 140 140" version="1.1"
						xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
						<title>足球频道icon</title>
						<desc>Created with Sketch.</desc>
						<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<g id="14″-iPad-Pro" transform="translate(-284.000000, -2244.000000)">
								<g id="编组-2" transform="translate(284.000000, 2277.000000)"
									:fill="curName=='DrawPrize'?'#00309B':'#191919'">
									<g id="wbdicon-hobby-football"
										transform="translate(70.000000, 46.000000) rotate(15.000000) translate(-70.000000, -46.000000) translate(33.000000, 9.000000)"
										fill-rule="nonzero">
										<path
											d="M36.8976705,73.7922705 C16.5187027,73.7922705 0,57.2740564 0,36.8969216 C0,16.5196371 16.5187027,0 36.8976705,0 C57.2737926,0 73.7922705,16.5196371 73.7922705,36.8969216 C73.7922705,57.2740563 57.2737925,73.7922705 36.8976705,73.7922705 M64.0764923,59.3628072 C64.1000821,57.8621658 64.1650103,53.7412808 64.188675,51.5867018 L52.4452222,51.7209792 C52.0940711,52.100221 44.9194014,59.8646437 40.1499928,61.647994 L40.9232889,69.3091436 C43.0629214,69.5311918 46.8966762,69.9252618 48.7707548,70.0876229 C54.7945418,67.9264536 60.0716928,64.1965681 64.0764923,59.3628072 M13.2367996,63.0470099 C18.4930567,67.8069295 25.1808031,70.9935645 32.5769175,71.9063961 L38.532631,69.5009363 L37.7181463,61.4178577 C32.0869235,59.3761376 27.3470958,55.9097892 25.056863,54.2887999 L13.0123594,57.6039458 C13.0804328,59.3010231 13.1718714,61.5461438 13.2367996,63.0470099 M5.32725123,21.163777 C2.95726247,25.9050489 1.59377192,31.2354039 1.59377192,36.8969216 C1.59377192,39.2225488 1.87999483,41.4759823 2.3138974,43.6739973 C2.47333451,40.6457542 3.16103342,33.7933392 6.09463118,26.9234002 L5.32725123,21.163777 Z M7.89202439,28.7068254 C4.77232921,36.155363 4.33258535,43.3951827 4.27372323,44.9623262 L4.79599392,45.0220883 L12.8325527,55.1668077 L23.8852361,52.1247848 C24.7234604,45.7311447 26.4440182,40.4526883 27.1317171,38.532065 L17.0027054,25.8704499 L7.89202439,28.7068254 Z M36.8976705,1.59148272 C30.1185605,1.59148272 23.8084757,3.53502226 18.431199,6.84867042 C19.470049,7.55997353 21.8636275,8.96850052 23.622603,9.98962267 C26.730316,8.97434193 30.2896053,8.39297257 34.3654737,8.39297257 C36.8445746,8.39297257 39.1142132,8.62543041 41.2923382,8.95666796 L48.3400724,3.52536152 C44.7482817,2.29394885 40.9086108,1.59148272 36.8976705,1.59148272 M43.1044844,11.4137267 C40.5397862,10.8802119 37.8037436,10.5238863 34.7668748,10.5238863 C31.234171,10.5238863 28.1233875,11.0159871 25.3639049,11.8623165 L18.9093606,24.4152666 L29.2271656,37.3121854 C31.9247157,36.7897543 37.3818231,35.9493412 43.5235591,36.2467285 L51.0347767,21.0056847 L43.1044844,11.4137267 Z M61.774577,22.1126305 L53.162427,22.1126305 L45.922904,36.8016617 C48.4315109,38.9126548 50.7246644,45.6963958 51.8136895,49.3288497 L64.9295444,49.1813917 C68.1257005,44.0370629 69.7991536,38.4205541 70.2152327,36.9153443 C69.3743125,34.2449996 66.9657563,27.9165136 61.774577,22.1126305 M64.1975117,21.6875561 C70.2329812,28.9576313 72.0598804,36.4976841 72.0598804,36.4976841 L72.1838204,36.4976841 C72.0894612,28.1355661 69.0849443,20.4774121 64.1443411,14.4735733 C64.1385747,16.7617557 64.1827587,20.4804077 64.1975117,21.6875561"
											id="形状"></path>
									</g>
									<text id="足球频道" font-family="PingFangTC-Medium, PingFang TC" font-size="36"
										font-weight="400" letter-spacing="-1.68">
										<tview x="0" y="144">足球频道</tview>
									</text>
								</g>
							</g>
						</g>
					</svg>
				</view>
			</view>
			<view class="title" :style="curName=='DrawPrize'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">开奖历史
			</view>
		</view>

		<view class="bottom_navi_xuan" @click="handTab('challenge')"
			:style="curName=='challenge'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">
			<view class="top"
				:style="curName=='challenge'?'background-color:  rgb(26, 61, 150);':'background-color: rgb(255, 255, 255);'">
			</view>
			<view class="icon">
				<view><svg width="52px" height="52px" viewBox="0 0 140 140" version="1.1"
						xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
						<title>直播节目表icon</title>
						<desc>Created with Sketch.</desc>
						<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<g id="14″-iPad-Pro" transform="translate(-756.000000, -2244.000000)">
								<text id="直播节目表" font-family="PingFangTC-Medium, PingFang TC" font-size="36"
									font-weight="400" letter-spacing="-1.68" fill="#191919">
									<tview x="736" y="2421">直播节目表</tview>
								</text>
								<g id="编组-4" transform="translate(788.000000, 2287.000000)"
									:fill="curName=='challenge'?'#00309B':'#191919'">
									<path
										d="M9,10 L9,16 C9,19.2383969 11.5655749,21.8775718 14.7750617,21.9958615 L15,22 C18.2383969,22 20.8775718,19.4344251 20.9958615,16.2249383 L21,16 L21,10 L51,10 L51,16 C51,19.2383969 53.5655749,21.8775718 56.7750617,21.9958615 L57,22 C60.2383969,22 62.8775718,19.4344251 62.9958615,16.2249383 L63,16 L63,10 L69,10 C70.6568542,10 72,11.3431458 72,13 L72,69 C72,70.6568542 70.6568542,72 69,72 L3,72 C1.34314575,72 2.02906125e-16,70.6568542 0,69 L0,13 C-2.02906125e-16,11.3431458 1.34314575,10 3,10 L9,10 Z M66,26 L7,26 L7,66 L66,66 L66,26 Z M46.5,52 C48.4329966,52 50,53.5670034 50,55.5 C50,57.4329966 48.4329966,59 46.5,59 C44.5670034,59 43,57.4329966 43,55.5 C43,53.5670034 44.5670034,52 46.5,52 Z M56.5,52 C58.4329966,52 60,53.5670034 60,55.5 C60,57.4329966 58.4329966,59 56.5,59 C54.5670034,59 53,57.4329966 53,55.5 C53,53.5670034 54.5670034,52 56.5,52 Z M36.5,42 C38.4329966,42 40,43.5670034 40,45.5 C40,47.4329966 38.4329966,49 36.5,49 C34.5670034,49 33,47.4329966 33,45.5 C33,43.5670034 34.5670034,42 36.5,42 Z M26.5,42 C28.4329966,42 30,43.5670034 30,45.5 C30,47.4329966 28.4329966,49 26.5,49 C24.5670034,49 23,47.4329966 23,45.5 C23,43.5670034 24.5670034,42 26.5,42 Z M46.5,42 C48.4329966,42 50,43.5670034 50,45.5 C50,47.4329966 48.4329966,49 46.5,49 C44.5670034,49 43,47.4329966 43,45.5 C43,43.5670034 44.5670034,42 46.5,42 Z M56.5,42 C58.4329966,42 60,43.5670034 60,45.5 C60,47.4329966 58.4329966,49 56.5,49 C54.5670034,49 53,47.4329966 53,45.5 C53,43.5670034 54.5670034,42 56.5,42 Z M26.5,32 C28.4329966,32 30,33.5670034 30,35.5 C30,37.4329966 28.4329966,39 26.5,39 C24.5670034,39 23,37.4329966 23,35.5 C23,33.5670034 24.5670034,32 26.5,32 Z M16.5,32 C18.4329966,32 20,33.5670034 20,35.5 C20,37.4329966 18.4329966,39 16.5,39 C14.5670034,39 13,37.4329966 13,35.5 C13,33.5670034 14.5670034,32 16.5,32 Z M36.5,32 C38.4329966,32 40,33.5670034 40,35.5 C40,37.4329966 38.4329966,39 36.5,39 C34.5670034,39 33,37.4329966 33,35.5 C33,33.5670034 34.5670034,32 36.5,32 Z M15,0 C16.6568542,-3.04359188e-16 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 C13.3431458,18 12,16.6568542 12,15 L12,3 C12,1.34314575 13.3431458,-5.83819232e-16 15,0 Z M57,0 C58.6568542,-3.04359188e-16 60,1.34314575 60,3 L60,15 C60,16.6568542 58.6568542,18 57,18 C55.3431458,18 54,16.6568542 54,15 L54,3 C54,1.34314575 55.3431458,-5.83819232e-16 57,0 Z"
										id="形状结合"></path>
								</g>
							</g>
						</g>
					</svg></view>
			</view>
			<view class="title" :style="curName=='challenge'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">挑码助手
			</view>
		</view>
		<view class="bottom_navi_xuan" @click="handTab('MultipleBets')"
			:style="curName=='MultipleBets'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">
			<view class="top"
				:style="curName=='MultipleBets'?'background-color:  rgb(26, 61, 150);':'background-color: rgb(255, 255, 255);'">
			</view>
			<view class="icon">
				<view>
					<svg style="margin-top: 9px;"  width="40px" height="35px" t="1734350481851"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6338" id="mx_n_1734350481852"><path d="M415.324 116.492l-246.088 0c-29.124 0-52.732 23.61-52.732 52.733l0 246.088c0 29.122 23.609 52.733 52.732 52.733l246.088 0c29.123 0 52.732-23.612 52.732-52.733l0-246.088c0.001-29.124-23.609-52.733-52.732-52.733zM402.14 314.239l-87.888 0 0 87.89-43.944 0 0-87.89-87.887 0 0-43.944 87.888 0 0-87.887 43.945 0 0 87.888 87.889 0 0 43.943zM854.766 116.492l-246.088 0c-29.123 0-52.732 23.61-52.732 52.733l0 246.088c0 29.122 23.609 52.733 52.732 52.733l246.087 0c29.124 0 52.733-23.612 52.733-52.733l0-246.088c0.001-29.124-23.608-52.733-52.733-52.733zM841.583 314.239l-219.723 0 0-43.944 219.723 0 0 43.944zM415.324 555.936l-246.088 0c-29.124 0-52.732 23.607-52.732 52.732l0 246.086c0 29.125 23.609 52.732 52.732 52.732l246.088 0c29.123 0 52.732-23.608 52.732-52.732l0-246.086c0.001-29.126-23.609-52.732-52.732-52.732zM385.498 793.858l-31.072 31.074-62.147-62.147-62.147 62.147-31.072-31.074 62.147-62.147-62.147-62.147 31.072-31.073 62.147 62.147 62.147-62.147 31.072 31.073-62.147 62.147 62.147 62.147zM854.766 555.936l-246.088 0c-29.123 0-52.732 23.607-52.732 52.732l0 246.086c0 29.125 23.609 52.732 52.732 52.732l246.087 0c29.124 0 52.733-23.608 52.733-52.732l0-246.086c0.001-29.126-23.608-52.732-52.733-52.732zM819.613 797.628l-175.779 0 0-43.944 175.779 0 0 43.944zM819.613 709.738l-175.779 0 0-43.943 175.779 0 0 43.943z" :fill="curName=='MultipleBets'?'#00309B':'#191919'" p-id="6339"></path></svg>
				</view>
			</view>
			<view class="title" :style="curName=='MultipleBets'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">复式计算
			</view>
		</view>
		<view class="bottom_navi_xuan" @click="handTab('more')"
			:style="curName=='more'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">
			<view class="top"
				:style="curName=='more'?'background-color:  rgb(26, 61, 150);':'background-color: rgb(255, 255, 255);'">
			</view>
			<view class="icon">
				<view>
					<svg width="60px" height="60px" viewBox="0 0 140 140" version="1.1"
						xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
						<title>更多icon</title>
						<desc>Created with Sketch.</desc>
						<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<g id="14″-iPad-Pro" transform="translate(-991.000000, -2244.000000)">
								<text id="更多" font-family="PingFangTC-Medium, PingFang TC" font-size="36"
									font-weight="400" letter-spacing="-1.68"
									:fill="curName=='more'?'#00309B':'#191919'">
									<tview x="1028" y="2421">更多</tview>
								</text>
								<g id="编组-3" transform="translate(1025.000000, 2314.000000)"
									:fill="curName=='more'?'#00309B':'#191919'">
									<path
										d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M10,6 C7.790861,6 6,7.790861 6,10 C6,12.209139 7.790861,14 10,14 C12.209139,14 14,12.209139 14,10 C14,7.790861 12.209139,6 10,6 Z"
										id="形状结合"></path>
									<path
										d="M36,0 C41.5228475,0 46,4.4771525 46,10 C46,15.5228475 41.5228475,20 36,20 C30.4771525,20 26,15.5228475 26,10 C26,4.4771525 30.4771525,0 36,0 Z M36,6 C33.790861,6 32,7.790861 32,10 C32,12.209139 33.790861,14 36,14 C38.209139,14 40,12.209139 40,10 C40,7.790861 38.209139,6 36,6 Z"
										id="形状结合备份"></path>
									<path
										d="M64,0 C69.5228475,0 74,4.4771525 74,10 C74,15.5228475 69.5228475,20 64,20 C58.4771525,20 54,15.5228475 54,10 C54,4.4771525 58.4771525,0 64,0 Z M64,6 C61.790861,6 60,7.790861 60,10 C60,12.209139 61.790861,14 64,14 C66.209139,14 68,12.209139 68,10 C68,7.790861 66.209139,6 64,6 Z"
										id="形状结合备份-2"></path>
								</g>
							</g>
						</g>
					</svg>
				</view>
			</view>
			<view class="title" :style="curName=='more'?'color: rgb(26, 61, 150);':'color: rgb(0, 0, 0);'">更多</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				deviceWidth: null,
				curName: 'home',
				current: 'home',
				list: [{
						name: '首页',
						icon: '/static/tabbar/home.png',
						noicon: '/static/tabbar/nohome.png',
						cur: 'home'
					},
					{
						name: '开奖',
						icon: '/static/tabbar/work.png',
						noicon: '/static/tabbar/nowork.png',
						cur: 'openprize'
					},
					{
						name: '比分',
						cur: 'score',
						icon: '/static/tabbar/score.png',
						noicon: '/static/tabbar/noscore.png',
						// bulge: true
					},
					{
						name: '我的',
						icon: '/static/tabbar/mine.png',
						noicon: '/static/tabbar/nomine.png',
						cur: 'mine'
					}
				]
			}
		},
		computed: {
			// ...mapState(['userInfo'])
		},
		mounted() {
		this.getDeviceWidth()
		},
		methods: {
			// 节流
			handTab(name) {
				this.curName = name
				uni.$u.throttle(this.changeTab, 300)
			},
			//切换tabbar
			changeTab() {
				const name = this.curName
				if (name == this.current) return
				this.current = name
				this.$emit('change', this.current)
			},
			getDeviceWidth() {
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.screenWidth;

				// 判断是否为PC设备
				if (screenWidth >= 768) {
					this.deviceWidth = 350; // 如果是PC，使用默认宽度350px
				} else {
					this.deviceWidth = null; // 如果是手机，使用实际屏幕宽度
				}
				console.log(this.deviceWidth);
			}
		}
	}
</script>

<style lang="scss">
	.bottom_navi {
		// width: 100%;
		height: 88.297px;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		box-shadow: 0 0 .16rem rgba(0, 0, 0, .1);
		display: flex;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
		z-index: 1001;

		.bottom_navi_xuan {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 100%;

			.top {
				width: 100%;
				height: .107rem;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}

			.icon {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 30px;
				margin-bottom: 10px;
			}

			.title {
				font-size: 26rpx;
				color: #000;
				font-weight: 700;
			}
		}
	}

	.tabbar {
		min-height: 100rpx;
		@include flex();
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		height: calc(100rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		border-top: 2rpx solid #F1F0F3;

		&-item {
			flex: 1;
			@include flex(column);
			align-items: center;
			justify-content: center;
			height: 100%;
			position: relative;

			.conten {
				@include flex(column);
				align-items: center;
				justify-content: center;

				.text {
					font-size: $u-font-xs;
					color: $u-tips-color;
				}

				.current {
					color: #333333;
					font-weight: bold;
				}
			}

			.add-conten {
				@include flex();
				justify-content: center;
				position: absolute;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-color: #FFFFFF;
				z-index: 2;
				top: -30rpx;
				// box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
				border-top: 2rpx solid #F1F0F3;

				.add-text {
					font-size: $u-font-xs;
					position: absolute;
					z-index: 25;
					top: 90rpx;
					color: $u-tips-color;
				}

				.current {
					font-weight: bold;
					color: #333333;
				}

				.title {
					@include flex();
					align-items: center;
					justify-content: center;
					position: relative;
					margin-top: 10rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					z-index: 9;
				}

				&::after {
					content: "";
					position: absolute;
					top: 28rpx;
					left: -10rpx;
					bottom: -10rpx;
					right: -10rpx;
					background-color: #FFFFFF;
					z-index: 3;
				}

			}
		}
	}
</style>